<template>
	<transition name='fade'>
		<div class='user pages' ref='user'>
			<div class='top'>
				<div class="pic-wrap" :style="'background:url('+ userInfo.headimgurl +') no-repeat 0 0/cover'" @click="toForm">
				</div>
				<div class="info">
					<p class='t'>{{ userInfo.nickname }}</p>
					<p class="id"><Icon type="ribbon-a" class='icon' :class="{member: moreConfig.is_member == '1'}"></Icon>ID: <em>{{ userInfo.mobile }}</em></p>
				</div>

				<div class='menu'>
					<div class='menu-item' v-for="(value, k) in config" :key='k.id' :title="value">
						<i class='num'>{{ value >= 999 ? '999+' : value }}</i>
						<span>{{ menusZH[k] }}</span>
					</div>
				</div>
			</div>

			<div class='user-body'>
				<div class='list1'>
					<li class='list-item' v-for="(item, index) in list1" :key="item.id" @click="linkTo(item)">
						<Icon :type="item.icon" class='left'></Icon>
						<p class='text'>
							<span>
								{{ item.name }}
							</span>
							<i class='num' v-if="item.num > 0">
								{{ item.num }}
							</i>
						</p>
						<Icon type="chevron-right" class='right'></Icon>
					</li>
				</div>

				<div class='list2'>
					<li class='list-item' v-for="(item, index) in list2" :key="item.id" @click="linkTo(item)">
						<Icon :type="item.icon" class='left'></Icon>
						<p class='text'>
							<span>
								{{ item.name }}
							</span>
							<i class='num' v-if="item.num > 0">
								{{ item.num }}
							</i>
						</p>
						<Icon type="chevron-right" class='right'></Icon>
					</li>
				</div>
				
				<div class='logout-text'>
					<span class='left' @click="logout">退出登陆</span>
					<span class='right' @click="goTop">返回顶部</span>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import {mapState} from 'vuex'
	import $ 		  from 'jquery'
	import Cookies    from 'js-cookie'

	export default{
		data() {
			return {
				list1 		: [{
					icon 	: 'social-usd-outline',
					name	: '充值',
					to 		: '/income/index'
				},{
					icon 	: 'ios-list-outline',
					name	: '充值记录',
					to 		: '/record/lists?status=0'
				},{
					icon 	: 'clipboard',
					name	: '消费记录',
					to 		: '/record/lists?status=1'
				},{
					icon    : 'ios-flame-outline',
					name    : '我的订单',
					to 		: '/order/lists?status=0'

				}],
				list2 		: [{
					icon 	: 'ios-heart-outline',
					name	: '我的书架',
					to 		: '/book/lists?status=0'
				},{
					icon 	: 'ios-bookmarks-outline',
					name	: '最近阅读',
					to 		: '/book/lists?status=1'
				},{
					icon 	: 'ios-help-outline',
					name	: '用户指南',
					to 		: '/help'
				}],
				menus 		: ['score', 'experience', 'praise'],
				config      : {
					'----'  : '----',
					'----'  : '----',
					'----'  : '----'
				},
				moreConfig  : {},
				menusZH 	: {
					'score' : '金币',
					'experience' : '经验',
					'praise': '获赞'
				}
			}
		},
		computed: {
			...mapState({
		      userInfo: state => state.userInfo,
		    }),
		},
		created() {

		},
		activated() {
			this.signIn()
			this.getConfig()
		},
		methods: {
			signIn() {
				this.HttpService.signIn().then(data => {
					this.$store.commit('setUserInfo', data.data)
					Cookies.set('userInfo', data.data)
				})
			},
			getConfig() {
				let config = {}
				this.HttpService.getConfig().then(data => {
					this.moreConfig 	= data
					for(let i = 0, len = this.menus.length; i < len; i++) {
						let activeMenu = this.menus[i]
						let item = data[activeMenu]
						if(item) {
							config[activeMenu] = data[activeMenu] 
						}
					}
					this.config 		= config
					console.log(this.config)
				})
			},
			toForm() {
				this.$router.push('/form')
			},
			linkTo(item) {
				this.$router.push(item.to)
			},
			goTop() {
				$(this.$refs.user).animate({scrollTop: 0})
			},
			logout() {
		      this.$Message.success('你成功退出登陆')
		      this.$Message.info('2秒钟跳到首页', 2)
		      setTimeout(() =>  {
		      	Cookies.remove('session')
			      Cookies.remove('userInfo')
			      Cookies.remove('token')
			      localStorage.clear()
			      this.$store.commit('setUserInfo', false)

		      	  this.$router.push('/home/index')
		      },2000)

		    }
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	.top
		position: relative
		display: flex
		padding: 20px 20px 78px
		background: -webkit-gradient(linear, 0% 0%, 0% 100%,from($mc), to($vc))
		.pic-wrap
			width: 80px
			height: 80px
			border-radius: 50%
			overflow: hidden
			box-shadow: 0 0 10px 1px rgba(0,0,0, .3)	
			img
				width: 80px
				height: 80px
		.info
			flex: 1
			margin-left: 20px
			color: #eee
			font-family: '微软雅黑'
			.t
				margin-top: 10px
				font-size: 16px
				font-weight: bold
				letter-spacing: 2px
				hh(20px)
				no-wrap()
			.id
				hh(20px)
				margin-top: 8px
				font-size: 16px
				font-weight: bold
				no-wrap()
				.icon
					margin-right: 10px
					font-size: 20px
					&.member
						color: red
				em
					font-size: 12px	
					letter-spacing: 1px
					font-weight: normal
	.user-body
		background-color: #f1f1f1
		overflow: hidden

	.menu
		position: absolute
		left: 0
		bottom: 0
		right: 0
		display: flex
		padding: 14px 0
		line-height: 16px
		font-size: 12px
		color: #eee
		background-color: rgba(0,0,0, .3)
		.menu-item
			box-sizing: border-box
			flex: 1
			text-align: center
			border-right: 1px solid #aaa
			&:last-child
				border-right: none
		.num
			display: block
			
	.list1, .list2
		background-color: #fff
		margin-top: 10px
		.list-item
			display: flex
			justify-content: center
			align-items: center
			border-top: 1px solid $vc
			.left, .right, .text
				width: 40px
				height: 46px
				text-align: center
				line-height: 46px
				font-size: 20px
				color: $mc
			.text
				display: flex
				flex: 1
				font-size: 14px
				color: #222
	
	.logout-text
		width: 88%
		margin: 50px auto 20px
		color: #47a1df
		hh(30px)
		font-size: 16px
		overflow: hidden		
		.left
			float: left
			cursor: pointer
		.right
			float: right
			cursor: pointer	

</style>